<template>
  <vxe-modal v-model="dialogVisible" title="新增" resize show-footer show-zoom :width="isMobile?'100%':'60%'" :fullscreen="isMobile">
    <el-form
      ref="form"
      :model="modelValue"
      :rules="rules"
      label-width="90px"
      label-position="right"
    >
      <el-form-item prop="id" label="KEY">
        <el-input v-model.trim="modelValue.id" clearable />
      </el-form-item>
      <el-form-item prop="jsonData" label="DATA">
        <el-input v-model="modelValue.jsonData" type="textarea" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <vxe-button status="primary" content="提交" :disabled="loading" @click="clickSubmitBtn" />
    </template>
  </vxe-modal>
</template>

<script>
import Api from '@/api/upms/config'
import { VxeModalMixin } from '@/mixins/vxe/VxeModalMixin'
export default {
  name: 'UpmsConfigCreateDialog',
  mixins: [VxeModalMixin],
  data() {
    return {
      api: Api.create,
      modelValue: {
        id: undefined,
        jsonData: undefined
      },
      rules: {
        id: [
          { required: true }
        ],
        jsonData: [
          { required: true },
          { validator: (rule, value, callback) => {
            if (value !== '') {
              try {
                const valueJson = JSON.parse(value)
                if (typeof valueJson === 'object' && valueJson) {
                  callback()
                } else {
                  callback(new Error('JSON格式错误'))
                }
              } catch (e) {
                callback(new Error('JSON格式错误'))
              }
            } else {
              callback()
            }
          } }
        ]
      }
    }
  },
  computed: {

  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style>

</style>
